<!DOCTYPE html>
<html lang="en">

<head>
    <title>Login</title>
    <link rel="stylesheet"href="styles.css">
    <meta name="comp1800 template" content="My 1800 App">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.3/css/bootstrap.min.css" rel="stylesheet"
        crossorigin="anonymous">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.3/js/bootstrap.js"
        crossorigin="anonymous"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>

</head>

<body>
    <nav class="navbar navbar-expand-lg bg-success">
        <div class="container-fluid">
          <a class="navbar-brand" href="./index.html">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-exclamation-triangle" viewBox="0 0 16 16">
                     <path d="M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.15.15 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.2.2 0 0 1-.054.06.1.1 0 0 1-.066.017H1.146a.1.1 0 0 1-.066-.017.2.2 0 0 1-.054-.06.18.18 0 0 1 .002-.183L7.884 2.073a.15.15 0 0 1 .054-.057m1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767z"/>
                      <path d="M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z"/>
                         </svg>
                          Disaster warning
          </a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
              <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="./Home.html">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="./Weather forecast.html">Weather Forecast</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="./scan.html">Scan</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="./Map.html">Map</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Login</a>
              </li>
              <div class="search-box">
                <input type="text"placeholder="搜索...">
              </div>
            </ul>
          </div>
        </div>
      </nav>

      <div class="container my-2">
        <div class="p-2 text-center bg-body-tertiary rounded-3">
          <img src="./images/imgs/image.png" class="img-fluid rounded">
          <h1 class="text-body-emphasis">My account</h1>
          <p class="col-lg-8 mx-auto fs-5 text-muted">
            Username
            ID:123456789
          </p>
          </div>
        </div>
      </div>

      <div class="container my-2">

        <div class="card-group">
          <div class="card">
            <img src="./images/imgs/R-C.jpg" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">Torrential rain</h5>
              <p class="card-text">Heavy rainstorms are a relatively serious type of disaster. They may trigger urban waterlogging, causing severe water accumulation on roads and greatly affecting travel. They may also wash away some infrastructure. In rural areas, heavy rainstorms may lead to the flooding of farmland, affecting the growth of crops. In mountainous areas, they are likely to induce geological disasters such as landslides and mudslides.</p>
              <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
            </div>
          </div>
          <div class="card">
            <img src="./images/imgs/image copy.png" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">Flood</h5>
              <p class="card-text"></p>
              <p class="card-text"><small class="text-body-secondary">Floods can submerge large areas of land and houses, wash away transportation facilities such as bridges and roads, throwing people's lives into chaos. Many people may lose their homes and even their lives as a result. Moreover, floods may bring germs and trigger diseases.</small></p>
            </div>
          </div>
          <div class="card">
            <img src="./images/imgs/imgs q.png" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">Tornado</h5>
              <p class="card-text"></p>
              <p class="card-text"><small class="text-body-secondary">Tornadoes can cause mechanical and physiological damage to agriculture, destroying large areas of crops and fruit trees. As for animal husbandry, if the herds on the grassland are not pre - emptively protected, their lives will be endangered, resulting in property losses. Tornadoes can also cause direct or indirect casualties to people. They can damage unstable buildings, high - altitude working equipment, etc., leading to traffic disruptions and building collapses.</small></p>
            </div>
          </div>
        </div>      
      </div>

      <div class="container">
        <footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
          <p class="col-md-4 mb-0 text-body-secondary">&copy; @2025 Zhang jiajia, Inc</p>
      
          <a href="/" class="col-md-4 d-flex align-items-center justify-content-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none" aria-label="Bootstrap">
            <img src="./images/imgs/image copy 2.png"height="35">
          </a>
      
          <ul class="nav col-md-4 justify-content-end">
            <li class="nav-item"><a href="./Home.html" class="nav-link px-2 text-body-secondary">Home</a></li>
            <li class="nav-item"><a href="./Weather forecast.html" class="nav-link px-2 text-body-secondary">Weather forecast</a></li>
            <li class="nav-item"><a href="./scan.html" class="nav-link px-2 text-body-secondary">Scan</a></li>
            <li class="nav-item"><a href="./Map.html" class="nav-link px-2 text-body-secondary">Map</a></li>
            <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">Login</a></li>
          </ul>
        </footer>
      </div>
      <script src="./scripts/scan.js"></script>
</body>

</html>